<template>
  <div>
    <el-descriptions
      title="新增线上客户"
      direction="vertical"
      :column="2"
      border
      style="margin-top: 20px"
    >
      <el-descriptions-item label="线上客户名称">
        <el-input v-model="data.name" placeholder="请输入内容" />
      </el-descriptions-item>
      <el-descriptions-item label="客户手机">
        <el-input
          :prefix-icon="Iphone"
          maxlength="11"
          v-model="data.phone1"
          placeholder="请输入内容"
        />
      </el-descriptions-item>
      <el-descriptions-item label="客户电话">
        <el-input
          v-model="data.phone2"
          maxlength="11"
          placeholder="请输入内容"
        />
      </el-descriptions-item>
      <el-descriptions-item label="客户来源">
        <el-select v-model="data.source" clearable placeholder="请选择来源">
          <el-option
            v-for="item in date.customerSource"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="电子邮箱">
        <el-input
          :prefix-icon="Message"
          v-model="data.email"
          placeholder="请输入内容"
        />
      </el-descriptions-item>
      <el-descriptions-item label="客户级别">
        <el-select v-model="data.level" clearable placeholder="请选择客户级别">
          <el-option
            v-for="item in date.customerLevel"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="客户行业">
        <el-select
          v-model="data.industry"
          clearable
          placeholder="请选择客户行业"
        >
          <el-option
            v-for="item in date.customerIndustry"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-input
          v-model="data.markUp"
          :rows="2"
          type="textarea"
          autosize
          placeholder="请输入备注"
        />
      </el-descriptions-item>
      <el-descriptions-item label="下次联系时间">
        <el-date-picker
          v-model="data.nextConnectionTime"
          type="datetime"
          value-format="YYYY-MM-DD"
          placeholder="选择日期"
        />
      </el-descriptions-item>
      <el-descriptions-item label="地址">
        <el-cascader
          v-model="selectOptions"
          @change="methods.chage"
          :options="optionsnative_place"
          placeholder="请选择地址"
        />
        <el-input
          v-model="data.address"
          :rows="2"
          type="textarea"
          autosize
          placeholder="请输入详细地址"
        />
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button type="primary" @click="methods.add">新增</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { Iphone, Message } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { addOnlineCustomers } from "@/api/OnlineCustomers/index";
import { getVipPackages, Get_dg_pak } from "@/api/Vip/VipPackages";
import { getVip } from "@/api/Vip/Vips";
import {
  getCustomerIndustry,
  getCustomerLevel,
  getCustomerSource,
} from "@/api/Dictionarys/index";
import { reactive, defineEmits } from "vue";
// 级联地址
import {
  provinceAndCityData,
  regionData,
  pcTextArr,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
const datar = reactive({
  page: 1,
  limeit: 10,
});
const optionsnative_place = pcaTextArr;
const data = reactive({
  name: "",
  phone1: "",
  phone2: "",
  source: "",
  email: "",
  level: "",
  industry: "",
  province: "",
  city: "",
  county: "",
  address: "",
  markUp: "",
  nextConnectionTime: "",
  account: "",
  password: "",
  vipId: "",
});
//来源
interface CustomerSource {
  id: string;
  value: string;
  dictionaryTypeId: string;
  createTime: string;
}
//客户行业
interface CustomerIndustry {
  id: string;
  value: string;
  dictionaryTypeId: string;
  createTime: string;
}
//客户级别
interface CustomerLevel {
  id: string;
  value: string;
  dictionaryTypeId: string;
  createTime: string;
}
//vip
interface Vip {
  id: string;
  name: string;
  createTime: string;
}
interface Date {
  customerSource: CustomerSource[];
  customerLevel: CustomerLevel[];
  customerIndustry: CustomerIndustry[];
  vip: Vip[];
}
const date = reactive<Date>({
  customerSource: [],
  customerLevel: [],
  customerIndustry: [],
  vip: [],
});
let selectOptions: any[] = [];
const defaultTime = new Date(2000, 1, 1, 12, 0, 0);
const emit = defineEmits(["myclose"]);
const methods = {
  async bind() {
    const res = await getCustomerSource();
    if (res.code === 0) {
      date.customerSource = res.data.data;
    }
  },
  async binder() {
    const res = await getCustomerIndustry();
    if (res.code === 0) {
      date.customerIndustry = res.data.data;
    }
  },
  async bindes() {
    const res = await getCustomerLevel();
    if (res.code === 0) {
      date.customerLevel = res.data.data;
    }
  },
  async bindet() {
    const res = await getVipPackages();
    if (res.code === 0) {
      date.vip = res.data.data;
    }
  },
  chage() {
    data.province = selectOptions[0];
    data.city = selectOptions[1];
    data.county = selectOptions[2];
  },
  async add() {
    if (data.name.trim() === "") {
      ElMessage.error("线上客户名称不允许为空");
      return;
    }
    if (data.phone1.trim() === "") {
      ElMessage.error("线上客户手机号码不允许为空");
      return;
    }
    if (data.phone2.trim() === "") {
      ElMessage.error("线上客户电话不允许为空");
      return;
    }
    if (data.email.trim() === "") {
      ElMessage.error("电子邮箱不允许为空");
      return;
    }
    if (data.industry.trim() === "") {
      ElMessage.error("客户行业不允许为空");
      return;
    }
    if (data.level.trim() === "") {
      ElMessage.error("客户级别不允许为空");
      return;
    }
    if (data.nextConnectionTime.trim() === "") {
      ElMessage.error("上次联系时间不允许为空");
      return;
    }
    if (data.province.trim() === "") {
      ElMessage.error("地址不允许为空");
      return;
    }
    if (data.city.trim() === "") {
      ElMessage.error("地址不允许为空");
      return;
    }
    if (data.county.trim() === "") {
      ElMessage.error("地址不允许为空");
      return;
    }
    const res = await addOnlineCustomers({
      ...data,
    });
    if (res.code === 0) {
      ElMessage.success(res.message);
      emit("myclose");
    } else {
      ElMessage.error(res.message);
    }
  },
};
onMounted(() => {
  // data.id = route.params.id;
  methods.bind();
  methods.binder();
  methods.bindes();
  methods.bindet();
  // console.log(route.params.id)
});
</script>

<style scoped></style>
